<template>
    <!-- 外层容器 -->
    <el-container class="h-screen">

        <!-- 左边侧边栏 -->
        <el-aside :width="isCollapse ? '64px' : '240px'" class="transition-all duration-300">
            <AdminMenu :is-collapse="isCollapse"></AdminMenu>
        </el-aside>

        <!-- 主容器 -->
        <el-container class="flex-1">
            <!-- 顶栏容器 -->
            <el-header class="h-[64px] p-0">
                <AdminHeader @toggle-menu="handleToggleMenu"></AdminHeader>
            </el-header>

            <el-main class="p-0">
                <!-- 标签导航栏 -->
                <AdminTagList></AdminTagList>

                <!-- 主内容（根据路由动态展示不同页面） -->
                <router-view v-slot="{ Component, route }">
                    <transition name="fade" mode="out-in">
                        <component :is="Component" :key="route.path" />
                    </transition>
                </router-view>
            </el-main>

            <!-- 底栏容器 -->
            <el-footer class="p-0">
                <AdminFooter></AdminFooter>
            </el-footer>
        </el-container>
    </el-container>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/userStore'
import AdminHeader from '@/components/admin/AdminHeader.vue'
import AdminMenu from '@/components/admin/AdminMenu.vue'
import AdminTagList from '@/components/admin/AdminTagList.vue'
import AdminFooter from '@/components/admin/AdminFooter.vue'
import { getUserInfo } from '@/api/user'

const userStore = useUserStore()

// 菜单收缩状态
const isCollapse = ref(false)

// 处理菜单收缩切换
const handleToggleMenu = (collapse) => {
    isCollapse.value = collapse
}

// 获取用户信息
const fetchUserInfo = async () => {
    try {
        const res = await getUserInfo()
        if (res.success && res.data) {
            // 保存用户信息到 store
            userStore.setUserInfo(res.data)
        }
    } catch (error) {
        console.error('获取用户信息失败:', error)
    }
}

onMounted(async () => {
    // 获取用户信息
    await fetchUserInfo()
})
</script>

<style scoped>
.el-aside {
    overflow: hidden;
}

.el-container {
    margin: 0;
    padding: 0;
}

.el-header {
    padding: 0 !important;
}

.el-main {
    padding: 0 !important;
}

.el-footer {
    padding: 0 !important;
}

/* 淡入淡出动画 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease;
}

.fade-enter-from {
    opacity: 0;
}

.fade-enter-to {
    opacity: 1;
}

.fade-leave-from {
    opacity: 1;
}

.fade-leave-to {
    opacity: 0;
}
</style>
